<template>
  <div>
    <p style="font-size: 20px; margin-bottom: 20px">用户信息</p>
    <table border="1" cellspacing="0">
      <tr v-for="(item, index) in tableData" :key="index">
        <td>用户ID：{{ item._id }}</td>
        <td>昵称：{{ item.name }}</td>
        <td>手机号：{{ item.tel }}</td>
      </tr>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>性别:{{ item.sex }}</td>
        <td>地区:{{ item.address }}</td>
        <td>注册时间：2020-02-14 14:30:30</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref, onMounted } from "vue";
const tableData = ref([]);
const getlist = async () => {
  const res = await axios.get("http://localhost:3000/zjm/list");
  console.log(res.data);
  tableData.value = res.data.list;
  tableData.value.forEach((item: any) => {
    if (item.flag) {
      item.flag = "有效";
    } else {
      item.flag = "无效";
    }
  });
};
const dateFormat = (row, column, cellValue, index) => {
  const daterc = row[column.property];
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    /* 在日期格式中，月份是从0开始，11结束，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return (
      year +
      "-" +
      month +
      "-" +
      day +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  }
};
onMounted(() => {
  getlist();
});
</script>

<style scoped>
</style>